<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户登录与注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply border-primary ring-2 ring-primary/20 transition-all duration-300;
            }
            .btn-hover {
                @apply transform hover:scale-[1.03] active:scale-[0.98] transition-all duration-300;
            }
        }
    </style>
    
    <style>
        /* 动画效果 */
        .slide-in {
            animation: slideIn 0.5s ease forwards;
        }
        
        .slide-out {
            animation: slideOut 0.5s ease forwards;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(-100%); opacity: 0; }
        }
        
        /* 背景渐变 */
        .bg-gradient {
            background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center p-4">
    <!-- 主容器 -->
    <div class="relative w-full max-w-4xl bg-white rounded-2xl shadow-2xl overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-5 pointer-events-none">
            <div class="absolute -right-10 -top-10 w-40 h-40 bg-primary rounded-full filter blur-3xl"></div>
            <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-secondary rounded-full filter blur-3xl"></div>
        </div>
        
        <!-- 表单切换控制器 -->
        <div class="absolute top-0 right-0 left-0 flex justify-center mt-6 z-10">
            <div class="bg-white/80 backdrop-blur-sm rounded-full shadow-md p-1 flex">
                <button id="loginBtn" class="px-6 py-2 rounded-full bg-primary text-white font-medium transition-all duration-300">
                    登录
                </button>
            </div>
        </div>
        
        <!-- 表单容器 -->
        <div class="relative h-[500px] overflow-hidden">
            <!-- 登录表单 -->
            <div id="loginForm" class="absolute inset-0 flex flex-col items-center justify-center p-8 slide-in">
                <div class="text-center mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">欢迎回来</h2>
                    <p class="text-gray-500 mt-2">请登录您的账户继续</p>
                </div>
                
                <form class="w-full max-w-md space-y-5" action="/login" method="post">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" name="username"class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:form-input-focus" 
                               placeholder="用户名" required>
                    </div>
                    
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" name="password"class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:form-input-focus" 
                               placeholder="密码" required>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="rememberMe" type="checkbox" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
                            <label for="rememberMe" class="ml-2 text-sm text-gray-600">记住我</label>
                        </div>
                        <a href="/registerpage" class="text-sm text-primary hover:text-primary/80 transition-colors">注册</a>
                    </div>
                    
                    <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg font-medium shadow-lg shadow-primary/20 btn-hover">
                        登录
                    </button>
                    
                </form>
            </div>
            
        </div>
        
        <!-- 底部版权信息 -->
        <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-gray-500 text-sm">
            &copy; 2025 账户系统. 保留所有权利.
        </div>
    </div>
    
</body>
</html>
    